<template>
  <el-popover
    v-if="showPopover"
    placement="bottom"
    title="校验信息"
    trigger="click"
  >
    <div style="width:500px;height:400px;overflow:auto;">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="errorMsgCount" name="first">
          <div v-if="errorMsg && errorMsg.length > 0">
            <span v-for="(msg,index) in errorMsg" :key="index" :index="index">{{ (index + 1) + '.' + msg }} <el-divider /></span>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="errorMsg" :label="promptMsgCount" name="second">
          <div v-if="promptMsg && promptMsg.length > 0">
            <span v-for="(msg,index) in promptMsg" :key="index" :index="index">{{ (index + 1) + '.' + msg }}<el-divider /></span>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="automationErrorMsg && automationErrorMsg.length > 0" :label="automationErrorMsgCount" name="third">
          <div v-if="automationErrorMsg && automationErrorMsg.length > 0">
            <span v-for="(msg,index) in automationErrorMsg" :key="index" :index="index">{{ (index + 1) + '.' + msg }}<el-divider /></span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <i v-if="type === 1" slot="reference" class="el-icon-warning" />
    <el-button v-if="type === 2" slot="reference" size="mini" type="danger">查看校验信息</el-button>
    <el-button v-if="type === 3" slot="reference" size="mini" type="text" style="color:#fc1111">点击查看</el-button>
  </el-popover>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: null
    },
    type: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      errorMsg: [],
      promptMsg: [],
      automationErrorMsg: []
    }
  },
  computed: {
    activeName: {
      get: function() {
        if (this.automationErrorMsg && this.automationErrorMsg.length > 0) {
          return 'third'
        } else if (this.errorMsg && this.errorMsg.length > 0) {
          return 'first'
        } else if (this.errorMsg && this.errorMsg.length <= 0 && this.promptMsg && this.promptMsg.length > 0) {
          return 'second'
        }
        return 'first'
      },
      set: function(val) {
      }
    },
    showPopover: function() {
      this.reflush(this.item)
      return (this.errorMsg && this.errorMsg.length > 0) || (this.promptMsg && this.promptMsg.length > 0) || (this.automationErrorMsg && this.automationErrorMsg.length > 0)
    },
    errorMsgCount: {
      get: function() {
        return '错误信息(' + this.errorMsg.length + ')'
      },
      set: function(val) {
      }
    },
    promptMsgCount: {
      get: function() {
        return '提示信息(' + this.promptMsg.length + ')'
      },
      set: function(val) {
      }
    },
    automationErrorMsgCount: {
      get: function() {
        return '自动化异常信息(' + this.automationErrorMsg.length + ')'
      },
      set: function(val) {
      }
    }
  },
  methods: {
    reflush(item) {
      if (item && item.errorMsg !== undefined && item.errorMsg !== null && item.errorMsg.length > 0) {
        this.errorMsg = JSON.parse(item.errorMsg)
      }
      if (item && item.promptMsg !== undefined && item.promptMsg !== null && item.promptMsg.length > 0) {
        this.promptMsg = JSON.parse(item.promptMsg)
      }
      if (item && item.automationErrorMsg !== undefined && item.automationErrorMsg !== null && item.automationErrorMsg.length > 0) {
        this.automationErrorMsg = JSON.parse(item.automationErrorMsg)
      }
    },
    clear() {
      this.promptMsg = []
      this.errorMsg = []
      this.automationErrorMsg = []
    }
  }
}
</script>
